<script lang="tsx" setup>
import { ref } from 'vue';

interface Props {
  title: string;
}

type SortType = 'ASC' | 'DESC' | '';

const sort = defineModel<SortType>('sort');

const props = defineProps<Props>();

function handleSort() {
  if (sort.value === 'ASC') {
    sort.value = 'DESC';
  } else if (sort.value === 'DESC') {
    sort.value = '';
  } else {
    sort.value = 'ASC';
  }
}
</script>

<template>
  <div class="sort-table-title flex-center">
    <slot>
      <span class="title">
        {{ props.title }}
      </span>
    </slot>
    <div class="surely-table-column-sorter-inner ml-8px cursor-pointer" @click="handleSort">
      <span
        role="img"
        aria-label="caret-up"
        class="anticon anticon-caret-up surely-table-column-sorter-up"
        :class="{ active: sort === 'ASC' }"
      >
        <svg
          focusable="false"
          class=""
          data-icon="caret-up"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
          viewBox="0 0 1024 1024"
        >
          <path
            d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
          ></path>
        </svg>
      </span>
      <span
        role="img"
        aria-label="caret-down"
        class="anticon anticon-caret-down surely-table-column-sorter-down"
        :class="{ active: sort === 'DESC' }"
      >
        <svg
          focusable="false"
          class=""
          data-icon="caret-down"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
          viewBox="0 0 1024 1024"
        >
          <path
            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
          ></path>
        </svg>
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
